<template>
	<view class="wrapper">
		<view class="head flex-between">
			<view>我的余额</view>
			<view class="head-tip">
				<span @click="joinPath('/pages/myWallet/flowingWater')">流水记录</span>
				<span @click="joinPath('/pages/myWallet/rewardIndex')">打赏记录</span>
			</view>
		</view>
		<view class="money">¥{{ resultmoney || 0.00 }}</view>
		<view class="footer">
			<view @click="showEvent(true, 1)">充值</view>
			<view @click="showEvent(true, 2)">提现</view>
		</view>
		<u-modal v-model="show" width="70%" title="充值" :show-cancel-button="true" confirm-text="充值" @cancel="showEvent(false, 1)" @confirm="confirmCZEvent">
			<view class="slot-content">
				<input class="slot-field wallet-input" label-width=0  focus type="digit" @blur="onlyNumAndPoint(2)"  maxlength="8" v-model="czmoney" placeholder="请输入充值金额">
			</view>
		</u-modal>
		<u-modal v-model="tishow" width="70%" title="提现" :show-cancel-button="true" confirm-text="提现到微信" @cancel="showEvent(false, 2)" @confirm="confirmTXEvent">
			<view class="slot-content">
				<input class="slot-field wallet-input" v-model="txmoney" @blur="onlyCZNumAndPoint(2)"  label-width=0 focus type="digit" maxlength="8"  placeholder="请输入提现金额">
				<view class="all-money flex-between">
					<view>当前钱包余额<span style="color: #F77E3C">{{ resultmoney }}</span>元</view>
					<span class="ti-btn" @click="allTXEvent">全部提现</span>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import apis from '@/apis.js'
	export default {
		data() {
			return {
				show: false,
				tishow: false,
				txmoney: '',
				czmoney: '',
				resultmoney: 0,
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			//文本框限制输入数字和点
			onlyNumAndPoint(num) {
			    //先把非数字的都替换掉，除了数字和.
			    this.czmoney = this.czmoney.replace(/[^\d.]/g, "");
			    //必须保证第一个为数字而不是.
			    this.czmoney = this.czmoney.replace(/^\./g, "");
			    //保证只有出现一个.而没有多个.
			    this.czmoney = this.czmoney.replace(/\.{2,}/g, ".");
			    //保证.只出现一次，而不能出现两次以上
			    this.czmoney = this.czmoney.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
			
			    // 最多保留num位小数
			    if(num){
			     var re = /.\.\d{3,}/g;
			     if(re.test(this.czmoney)){
			         this.czmoney = parseFloat(Number(this.czmoney).toFixed(num)); //parseFloat()使其结果如果为整数的话,就会显示整数而不会显示.00的情况.
			     }
			    }
			},
			onlyCZNumAndPoint(num) {
				//先把非数字的都替换掉，除了数字和.
				this.txmoney = this.txmoney.replace(/[^\d.]/g, "");
				//必须保证第一个为数字而不是.
				this.txmoney = this.txmoney.replace(/^\./g, "");
				//保证只有出现一个.而没有多个.
				this.txmoney = this.txmoney.replace(/\.{2,}/g, ".");
				//保证.只出现一次，而不能出现两次以上
				this.txmoney = this.txmoney.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
							
				// 最多保留num位小数
				if(num){
				 var re = /.\.\d{3,}/g;
				 if(re.test(this.txmoney)){
				     this.txmoney = parseFloat(Number(this.txmoney).toFixed(num)); //parseFloat()使其结果如果为整数的话,就会显示整数而不会显示.00的情况.
				 }
				}
			},
			inputText() {
				console.log(123321)
				this.txmoney = this.txmoney.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')
			},
			/**
			 *  @function 获取余额
			 */
			getList() {
				this.$http.post(apis.query_balance).then(res => {
					this.resultmoney = res.data.result
				})
			},
			/**
			 * @function 提现
			 */
			confirmTXEvent() {
				if (!this.txmoney) {
					uni.showToast({
						title: '金额不能为空',
						icon: 'none'
					})
					return
				}
				if (this.txmoney > this.resultmoney) {
					uni.showToast({
						title: '零钱不足，无法体现！',
						icon: 'none'
					})
					return
				}
				uni.showModal({
				  title: '提示',
				  content: '提现将收取对应手续费',
				  success: (res) => {
				    if (res.confirm) {
				      this.$http.post(apis.payWithdrawal, { balance: this.txmoney }).then(res => {
				      	this.txmoney = 0
				      	if (res.data.code === 200) {
				      		uni.showToast({
				      			title: '提现成功',
				      			icon: 'none'
				      		})
				      		this.getList()
				      	}
				      })
				    }
				  }
				})
				
			},
			/**
			 *  @function 充值
			 */
			confirmCZEvent() {
				let that = this
				this.$http.post(apis.payRecharge, { balance: this.czmoney, paySouc: 'gzh' }).then(res => {
					this.czmoney = 0
					if (res.data.code === 200) {
						// window.location.href= res.data.result.codeUrl
						let data = res.data.result
						WeixinJSBridge.invoke(
						   'getBrandWCPayRequest', {
						      "appId": data.appid,     //公众号ID，由商户传入     
						      "timeStamp": data.timeStamp,         //时间戳，自1970年以来的秒数     
						      "nonceStr": data.nonce_str, //随机串     
						      "package": data.packageStr,     
						      "signType": data.signType,         //微信签名方式：     
						      "paySign": data.sign //微信签名 
						   },
						   function(res){
						   if(res.err_msg == "get_brand_wcpay_request:ok" ){
								 that.getList()
						   // 使用以上方式判断前端返回,微信团队郑重提示：
						         //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
						   } 
						}); 
					}
				})
			},
			onBridgeReady(){
			   WeixinJSBridge.invoke(
			      'getBrandWCPayRequest', {
			         "appId":"wx2421b1c4370ec43b",     //公众号ID，由商户传入     
			         "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数     
			         "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
			         "package":"prepay_id=u802345jgfjsdfgsdg888",     
			         "signType":"MD5",         //微信签名方式：     
			         "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
			      },
			      function(res){
			      if(res.err_msg == "get_brand_wcpay_request:ok" ){
			      // 使用以上方式判断前端返回,微信团队郑重提示：
			            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
			      } 
			   }); 
			},
			
			/**
			 *  @function 全部提现
			 */
			allTXEvent() {
				this.txmoney = this.resultmoney
			},
			showEvent(status, type) {
				if (type === 1) {
					this.show = status
				} else {
					this.tishow = status
				}
				
			},
			joinPath(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.slot-content {
		display: flex;
		flex-flow: column nowrap;
		font-size: 31rpx;
		color: $u-content-color;
		padding: 80rpx 40rpx;
	
		.slot-field {
			width: auto;
			text-align: center;
		}
	}
	.wallet-input {
		background: #E9EBF4;
		border: 2rpx solid #949494;
		opacity: 1;
		border-radius: 4px;
		height: 66rpx;
		line-height: 66rpx;
	}
	.all-money{
		color: #4D5B80;
		font-size: 16px;
		margin-top: 20px;
	}
	.ti-btn{
		border-bottom: 1px solid #4D5B80;
		display: inline-block;
		font-size: 16px;
	}
	.wrapper{
		padding: 0 20px;
		.head{
			margin-top: 17px;
			color: #4D5B80;
			font-size: 20px;
			.head-tip{
				color: #21D2FF;
				font-size: 12px;
				>span{
					border-bottom: 1px solid #21D2FF;
					margin: 0 10rpx;
					display: inline-block;
				}
			}
		}
		.money{
			color: #4D5B80;
			font-size: 30px;
			text-align: center;
			padding: 30px;
			border-bottom: 1px solid #BFBFBF
		}
		.footer{
			>view{
				width: 160px;
				height: 32px;
				background: #3FA7FF;
				box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
				opacity: 1;
				text-align: center;
				line-height: 32px;
				color: #fff;
				margin: 20px auto;
			}
		}
	}
</style>
